<template>
    <div>
        <!-- 在组件中，使用v-for循环的话，一定要使用 key -->
        <!-- 将来，谁使用此 轮播图组件，谁为我们传递 lunbotuList -->
        <!-- 此时，lunbotuList 应该是 父组件向子组件传值来设置 -->
        <mt-swipe :auto="3000">
            <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
                <img :src="item.img" alt="" :class="{'full':isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
  export default {
    props: ['lunbotuList', 'isfull'], // 把父组件传递过来的 lunbotuList 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
  }
</script>

<style lang="scss" scoped>
    // 轮播图
    .mint-swipe {
        height: 200px;
        .mint-swipe-item {
            text-align: center;
            /*&:nth-child(1) {*/
            /*background-color: #f65e53;*/
            /*}*/
            /*&:nth-child(2) {*/
            /*background-color: #2b9bf4;*/
            /*}*/
            /*&:nth-child(3) {*/
            /*background-color: #ffcc33;*/
            /*}*/

            img {
                /*width: 100%;*/
                height: 100%;
            }
        }
    }

    .full {
        width: 100%;
    }
</style>